Savladavanje strelice i ovih funkcija u JavaScriptu

Temeljito savladajte Funkcije strelica i ponašanje `this` u JavaScriptu To označava prekretnicu u vašim vještinama programiranja. Ove dvije teme u početku djeluju zbunjujuće, ali kada ih shvatite, počinjete primjećivati ​​greške koje su vam ranije izmicale, pišete jasniji kod i manje se mučite s kontekstom.

U ovom članku ćemo, smireno i direktno, pogledati, Kako se pišu funkcije strelica, koje su razlike između njih i regularnih funkcija i kako sve ovo utiče na `ovo`?Pored toga, integrirat ćemo ključne koncepte kao što su poziv, primjena, povezivanje, korištenje funkcije new, različite vrste ovog povezivanja, kako se ponaša u klasama, događajima, povratnim pozivima, okruženjima kao što su React ili Node.js, te u kojim slučajevima ima smisla koristiti ili izbjegavati funkcije strelica.

Osnovna sintaksa funkcija strelica

Funkcija strelice se piše pomoću simbola => i uvijek je funkcionalni izrazTo jest, ne deklarira se s funkcijom name(), već se dodjeljuje varijabli ili svojstvu.

Opći format je otprilike ovako: const mojaFunkcija = (param1, param2) => { /* kod */ }Baš kao klasična anonimna funkcija, ali zamjenjujući riječ function sa strelicom => i zadržavajući zagrade za parametre i vitice za tijelo funkcije.

Važno je da to shvatite Funkcije strelica nisu deklaracije funkcijaNe možete ih koristiti prije nego što ih definirate jer se ne podižu (nema podizanja na isti način kao kod `function name()`). Uvijek se ponašaju kao izrazi koji se evaluiraju kada interpreter prođe kroz tu liniju.

Sintaktičke prečice: kraće verzije funkcija sa strelicama

Kada je kod unutar funkcije vrlo jednostavan, funkcije sa strelicama omogućavaju kompaktnija i čitljivija sintaksaAko tijelo ima samo jednu naredbu i ta naredba je povratna vrijednost, nekoliko stvari se može izostaviti:

• Riječ se može ukloniti Funkcija (Već smo ga uklonili, zapravo.)
• Mogu se ukloniti ključevi {}.
• Riječ se može izostaviti povratak, koristeći implicitni povratak.

Na primjer, umjesto pisanja sume poput const sadi = funkcija(a, b) { vrati a + b; }, sa strelicom možete ga ostaviti unutra konstanta sabiranje = (a, b) => a + b;Rezultat je isti, ali je kod kraći i lakši za čitanje, posebno kod povratnih poziva i metoda nizova.

Parametri u funkcijama strelica

Pravila za parametre se neznatno mijenjaju sa sintaksom i važno ih je razumjeti jer su glupe greške česte na početku:

• Jedan parametarMožete ukloniti zagrade i napisati nešto poput ime => `Zdravo ${name}`To je savršeno valjano i vrlo uobičajeno.
• Nulti parametriZagrade su tu obavezne, jer vam je potrebno nešto prije strelice: () => console.log('Nema parametara').
• Dva ili više parametaraTakođer su vam potrebne zagrade, na primjer (a, b, c) => a * b * c.

U svim slučajevima, ako se tijelo funkcije svede na jednostavan izraz, možete Iskoristite implicitni povratak i eliminišite vitičaste zagrade i return naredbe.što je vrlo praktično u metodama kao što su mapiranje, filtriranje, redukcija ili u malim transformacijskim funkcijama.

Implicitni povratak i povratak objekta

Kada funkcija strelice ima samo jedan izraz, Vrijednost tog izraza se automatski vraća Ako ne koristite vitičaste zagrade. Ali kada želite vratiti literalni objekat, postoji važan trik: morate staviti objekat u zagrade.

Ako napišete nešto poput const createUser = (ime, godine) => { ime: ime, godine: godine }JavaScript interpretira vitičaste zagrade kao tijelo funkcije, a ne kao povratni objekt, tako da ne vraća ništa (nedefinirano). Da bi radilo, morate napisati const createUser = (ime, godine) => ({ ime, godine }).

Ukratko, svaki put kada vaša funkcija strelice treba vrati objekat u jednoj liniji, stavite taj objekat u zagrade tako da mehanizam shvati da je to vraćena vrijednost, a ne blok koda.

Ključne razlike između normalnih funkcija i funkcija sa strelicama

Osim sintakse, ono što je zaista važno za svakodnevni život jeste da Funkcije strelica se ne ponašaju isto kao "normalne" funkcije u nekoliko kritičnih aspekata: ovo, argumenti, upotreba kao metode, konstruktori, itd.

Rješavanje ovoga u normalnim funkcijama

U klasičnoj funkciji, vrijednost Ovo zavisi od toga kako se funkcija pozivane od mjesta gdje je definirano. Ta nijansa je izvor velikog dijela zabune.

• Ako pozovete funkciju poput obj.method()Unutar te metode, this ukazuje na obj (implicitno povezivanje).
• Ako pozovete jednu funkciju, mojaFunkcija(), bez objekta ispred, u nestriktnom režimu ovo će biti globalni objekat (prozor u pretraživaču), a u striktnom režimu će biti nedefinisan.
• Ako koristite nova MojaFunkcija(), onda će unutar MyFunction, ovo biti novi kreirani objekat (povezujući se sa new).
• Ako koristite pozovite, prijavite se ili se vežiteMožete mu eksplicitno proslijediti koji objekt želite da to bude.

Taj dinamični karakter čini ovo veoma moćnim, ali i vrlo lako probiti u povratne pozive i asinhroni kod ako vam nije jasno odakle se svaka funkcija poziva.

Leksičko rukovanje "ovim" u funkcijama strelicama

Funkcije strelica potpuno mijenjaju pravila: Oni ovo nemajuUmjesto da prime novo `ovo` na osnovu svog imena, oni hvataju `ovo` okruženja u kojem su kreirani, što se naziva leksički `ovo`.

To znači da, unutar funkcije strelice, Ovo je potpuno isto "ovo" što je bilo na mjestu gdje je funkcija definirana.Ne utiče na to kako se poziva ili putem call/apply/bind metoda. Ova funkcija je čisto zlato za rad sa metodama niza, setTimeout, setInterval, obećanjima i bilo kojom situacijom u kojoj ste ranije morali žonglirati sa self = this ili bind.

Četiri glavna pravila `this` u JavaScriptu

Da biste u potpunosti razumjeli zašto su funkcije strelica toliko korisne, bitno je razumjeti kako JavaScript određuje vrijednost Ovo u normalnim funkcijamaPostoje četiri osnovna pravila, koja se primjenjuju ovim redoslijedom prioriteta:

1. Eksplicitno vezivanjekada koristite call, apply ili bind da biste ovo popravili.
2. Implicitno vezivanje: kada pozovete metodu kao svojstvo objekta (obj.method()).
3. Povezivanje s novim: kada pozovete funkciju sa new, pretvarajući je u konstruktor.
4. Zadano povezivanje: kada se ništa od navedenog ne odnosi na vas (globalno ili nedefinirano ovisno o načinu rada).

Funkcije strelica zaobilaze ovaj sistem: Oni ne učestvuju u tim pravilima jer nikada ne stvaraju svoja.Oni jednostavno nasljeđuju bilo koji kod koji se nalazi u okolnom okruženju.

Eksplicitno povezivanje: poziv, primjena i povezivanje

Normalne funkcije vam omogućavaju da nametnete vrijednost ovoga koristeći tri dobro poznate metode: pozovite, prijavite se i povežite seOni su fundamentalni za potpuno razumijevanje klasičnog modela i njegovo poređenje s ponašanjem funkcija strelica.

pozovite i primijenite: izvršite s prilagođenim `this`

I poziv i prijava služe za odmah pozovite funkciju sa konkretnim `this`Razlika leži u načinu na koji prosljeđujete argumente: call ih prima jedan po jedan, apply prima niz.

Na primjer, ako imate funkciju koja pozdravlja pomoću `this.name`, možete pozvati tu funkciju s različitim objektima i ponovo koristiti logiku. Ovo je vrlo uobičajeno kada želite Dijeljenje funkcija između objekata bez dupliranja koda.

bind: kreiraj novu funkciju sa `this`

bind funkcioniše drugačije: umjesto izvršavanja u datom trenutku, Vraća novu funkciju u kojoj je ovo "zalijepljeno" za objekt kojem ga prosljeđujete.Osim toga, argumente možete postaviti unaprijed (djelimična primjena), tako da rezultirajuća funkcija već dolazi s nekim unaprijed definiranim parametrima.

Veoma je korisno kada želite prosljeđivanje metoda kao povratnih poziva bez gubitka njihovog originalnog kontekstaNa primjer, u slušačima događaja ili u setInterval, gdje ovo obično prekida.

Važan detalj je taj Funkcija koja je već povezana sa bind ignoriše naredne pokušaje promjene `this` sa `call` ili `apply`Veza je trajna za tu izvedenu funkciju.

Implicitno vezivanje i gubitak konteksta

Implicitno vezivanje se javlja kada Funkciju pozivate kao metodu objektaTo jest, postoji nešto lijevo od tačke. U tom slučaju, 'ovo' postaje taj objekat.

Na primjer, ako imate objekt restorana s metodama welcomeGuest i cookPizza, kada to uradite restoran.dobrodošliGost()Unutar metode `this`, ona ukazuje na sam restoran, omogućavajući vam pristup svojstvima kao što su naziv ili lokacija.

Problem počinje kada odvojite metodu od objektaNa primjer, prosljeđivanjem kao povratnog poziva: `setInterval(this.tick, 1000)`. Kada se tajmer izvrši, više nema objekta lijevo od kvačice. Implicitno vezivanje se gubi, a preuzima podrazumijevano vezivanje, čineći `this` globalnim ili nedefiniranim, i vaš kod ne uspijeva.

Klasično rješenje je bilo korištenje vezati(ovo) ili pohraniti referencu poput const self = this. Danas, Funkcije strelica savršeno rješavaju ovaj gubitak kontekstajer nasljeđuju vanjski `this` i ne mijenjaju ga čak i ako ih proslijedite kao povratne funkcije.

Konstruktori, novi i ovi

Kada pozovete funkciju sa noviJavaScript automatski radi nekoliko stvari kako bi ga tretirao kao konstruktor:

• Kreirajte novi prazan objekat.
• Vezati Ovo je novi objekat unutar funkcije.
• Prilagodite prototip novog objekta prototipu konstruktora.
• Vratite objekat, osim ako eksplicitno ne vratite drugi objekat.

Zahvaljujući tome, graditelj poput funkcija Osoba(ime) { this.ime = ime; } Omogućava vam da uradite `const p = new Persona('Ana');` i imate objekat sa svojstvom `name`. Unutar konstruktora, `this` se odnosi na tu novokreiranu instancu.

Ovaj obrazac se također koristi za dizajniranje složenijih struktura, kao što su bankovni račun s metodama uplate i isplate ili vozilo s metodama vožnje i svojstvima poput godine i modela. U svim ovim slučajevima, Ovo je konkretan primjer s kojim radite..

Veoma važno: Funkcije strelica se ne mogu koristiti kao konstruktoriNe podržavaju upotrebu naredbe `new`, i ako pokušate, dobit ćete grešku. Budući da nemaju vlastiti `this` ili `prototype`, ne uklapaju se u ovaj model.

Zadano povezivanje i strogi način rada

Kada se ne primijeni ni eksplicitno vezivanje, ni implicitno vezivanje, ni naredba new, JavaScript pribjegava zadano povezivanje:

• U nestrogom režimu, Ovo ukazuje na globalni objekat (prozor u pregledniku, globalno u Node.js).
• U strogom režimu ('koristi strogo'), Ovo je nedefinisano u normalnoj funkciji koja se zove "bez kondoma".

Ova stroga promjena je veoma zdrava, jer spriječiti slučajno mijenjanje globalnog objekta kada ste mislili da radite s drugačijim kontekstom. Mnoge tipične greške s `this` izlaze na vidjelo kada aktivirate 'use strict', upravo zato što prestaju "djelimično raditi" i brzo ne uspijevaju.

Još jedan relevantan detalj je da, u globalnom okruženju preglednika, Varijable deklarisane sa var postaju svojstva globalnog objektaDakle, ako deklarišete `var nombreGlobal = 'Usuario'`, možete pristupiti `window.nombreGlobal`. Ovo se miješa sa `this` u ne-strogim funkcijama i dovodi do neobičnog (a ponekad i opasnog) ponašanja.

Strelica funkcioniše kao "prekretnica" za ovo

Velika prednost streličnih funkcija je u tome što oni ne generiraju novo ovoUmjesto toga, oni hvataju atribut `this` opsega u kojem su kreirani. Jednostavno rečeno: `ovo` unutar funkcije strelice je isto što i `ovo` izvan nje..

Ovo rješava mnoge klasične probleme gdje se gubio kontekst, na primjer u povratnim pozivima forEach, setTimeout, listenerima i obećanjima. Više nema potrebe za vezivanjem za svaki interni povratni poziv ili nošenjem međuvarijabli poput self ili that kako bi se sačuvao kontekst.

Vrlo tipičan primjer je iteracija kroz niz članova unutar objekta tima. Ako koristite normalnu funkciju unutar `forEach`, `this` se prekida i ne pokazuje na objekt tima. Ako umjesto toga koristite funkciju strelice, Ovo ostaje vanjska metodaDakle, možete pročitati this.name bez ikakvih iznenađenja.

Globalni kontekst, metode objekta i funkcije strelica

Funkcije strelica se ponašaju različito ovisno o kontekst u kojem su definirani:

• Ako su definirani u globalnom opsegu, nasljeđuju ovaj global (objekat prozora ili modula, ovisno o okruženju).
• Ako su definirani unutar normalne metodeOni nasljeđuju `this` te metode, što će obično biti objekt koji ju je pozvao.
• Ako strelicu postavite direktno kao metodu objekta (myObj.method = () => {}), Ovako ne dobijaš objekatali vanjsko this (globalno ili modulovo).

Ova posljednja tačka je ključna: Nije dobra ideja koristiti streličke funkcije kao metode objekta kada zavisite od `this` za pristup svojstvima objekta.U tim slučajevima je poželjnije koristiti klasičnu sintaksu funkcije u metodi, tako da `ovo` bude objekat.

Umjesto toga, dobra je praksa koristiti funkcije strelica ugniježđene unutar normalnih metoda kada želite povratne funkcije koje poštuju `this` te metode (na primjer, u `forEach`, `map`, `setTimeout`...).

ES6 klase, this i funkcije sa strelicama

ES6 klase nisu ništa više od Sintaktički šećer na sistemu prototipova i konstruktoraAli oni pomažu u boljem strukturiranju koda. Unutar klase, konstruktor se ponaša kao tradicionalni konstruktor funkcije: `this` pokazuje na novokreiranu instancu.

Metode definirane kao mojaMetoda() { … } Također koriste `this` kao instancu kada se pozivaju iz objekta. Međutim, ako izdvojite metodu i pohranite je u varijablu bez vezivanja, ponovo ćete izgubiti kontekst, baš kao i kod bilo koje druge normalne funkcije.

Vrlo popularna strategija je definiranje nekih metoda klase kao svojstva sa funkcijom streliceNa primjer, getInfoArrow = () => { … }. Ove metode su "vezane" za instancu od trenutka njenog kreiranja, tako da čak i ako ih proslijedite kao povratne funkcije ili ih izvadite iz konteksta, Ovo će i dalje ispravno pokazivati ​​na objekat.Ovo se mnogo koristi u frameworkovima poput Reacta (s komponentama klase) kako bi se izbjeglo povezivanje u konstruktoru za svaki rukovatelj događajima.

DOM događaji, povratni pozivi i tipični problemi sa `this`

U pregledniku, kada dodate slušač događaja pomoću addEventListener i proslijedite normalnu funkciju, `this` unutar rukovatelja ukazuje na DOM element koji je pokrenuo događajTo je ponekad korisno, ali drugi put narušava kontekst vaše klase ili objekta.

Na primjer, ako u klasi Button uradite `this.element.addEventListener('click', this.handleClick)`, kada se događaj pokrene, `this` unutar `handleClick` će biti DOM element, a ne instanca klase. Da biste ovo riješili, imate tri uobičajene opcije:

• Usar vezati(ovo) prilikom registracije slušaoca.
• Proslijedite funkciju strelice koja poziva this.handleClick(), čime nasljeđujete this iz instance.
• Definirajte handleClick kao svojstvo sa funkcijom strelice u klasi.

Nešto slično se dešava sa povratnim pozivima nizova (map, filter, forEach…): ako proslijedite metodu bez povezivanja, možete izgubiti kontekst. Opet, Funkcije sa strelicama su veoma praktične za pisanje internih povratnih poziva koji vide odgovarajuće `ovo`. bez potrebe za ručnim povezivanjem.

Asinhrone operacije, obećanja i async/await

Sa async/await, vrijednost ovoga očuvan je sasvim prirodno unutar asinhrone metode, sve dok koristite normalne funkcije u metodi klase.

Međutim, kada lančano povežete obećanja sa `then` i `catch`, ako koristite regularne funkcije unutar tih metoda, rizikujete gubitak atributa `this` instance. Zato je tako uobičajeno pisati .then(podaci => ovaj.proces(podaci)) y .catch(greška => this.manageError(greška))Funkcije strelica osiguravaju da `ovo` i dalje pokazuje na originalni objekat.

Ukratko, U modernom asinhronom kodu, streličke funkcije su standardni alat za održavanje konteksta. bez potrebe za lančanim vezanjem svugdje.

Kada je prikladno koristiti funkcije strelica

Funkcije strelica posebno su dobre u ovim slučajevima:

• Kratki povratni pozivi u metodama nizova, obećanjima, tajmerima itd.
• Male i jednostavne funkcije gdje dajete prednost kratkoći u odnosu na mogućnost ponovne upotrebe.
• Situacije u kojima Želite li da ovo ostane ono iz vanjskog okruženja?, kao što je unutar klase ili metode objekta.
• Komponente klase u Reactu i sličnim bibliotekama, na primjer izbjegnite potrebu za povezivanjem u konstruktoru za svakog rukovatelja.

Nadalje, u programiranje Funkcionalnije (kompozicija funkcija, liječenje, transformacije podataka), streličke funkcije čine kod mnogo čitljivijim i izražajnijim jer Oni favorizuju čiste i kratke funkcije bez potrebe da ih imenuju..

Kada NE biste trebali koristiti funkcije strelica

Postoje i jasni scenariji u kojima Korištenje funkcija sa strelicama nije dobra ideja. a klasična funkcija je poželjnija:

• Metode objekta koji zavise od `this` za pristup svojstvima objekta. Ako definirate metodu kao `arrow`, `this` neće biti objekt, već vanjski kontekst.
• GraditeljiFunkcije strelica se ne mogu koristiti sa new, tako da nisu korisne za kreiranje instanci.
• Funkcije koje zahtijevaju objekt arguments Funkcije strelica nemaju vlastite argumente; ako su vam potrebni, koristite normalnu funkciju ili preostale parametre (...argumente).
• Čisti uslužni programi ili pomoćni programi nezavisan od konteksta

Korisne funkcije (formatCurrency, calculateTax, male matematičke operacije) Ne bi trebali zavisiti od ovogaU ovim slučajevima, važno je da su čisti, laki za testiranje i bez nuspojava. Možete ih pisati sa `function` ili `arrow`, ali izbjegavajte oslanjanje na `this` uopće.

U obrascima funkcionalnog programiranja, također se preporučuje da funkcije ne zavise od konteksta. Što manje koristite `ovo` u ovoj vrsti koda, to će on biti predvidljiviji i kompozibilniji. vašu kodnu bazu.

Ovo u modernim okruženjima: React i Node.js

U Reactu s komponentama klase, upotreba `this` je ključna za rukovanje država i rekvizitiObrađivači događaja trebaju pristup `this.setState` i svojstvima komponente. Ako ne povežete ili ne koristite funkcije strelica za ove obrađivače, naići ćete na greške `this undefined` čim korisnik klikne.

Zato ćete ovakve obrasce vidjeti u mnogim projektima handleChange = (događaj) => { … } y onClick={this.handleChange}Ove funkcije strelica su definirane kao svojstva klase. Automatski se povezuju s instancom, izbjegavajući dodatna povezivanja u konstruktoru i smanjujući rizik od kontekstualnih grešaka.

U Node.js-u, ponašanje `this` na nivou modula Nije isto kao u pregledniku.Na nivou datoteke, `this` obično ukazuje na `module.exports` (u CommonJS-u) ili je nedefinisano u ES modulima, umjesto na globalni objekat. Ovo utiče na to kako razumijete `this` prilikom pisanja biblioteka i modula za višekratnu upotrebu.

U svakom slučaju, pravilo ostaje isto: Funkcije strelica nasljeđuju svojstvo `this` iz okruženja u kojem su definirane.U Nodeu, to će biti modul ili klasa u kojoj se nalazite, a koja određuje kako dizajnirate svoje API-je i kako izlažete metode drugim datotekama.

Korištenje JavaScripta u okruženjima poput Appsmitha

Na platformama s niskim kodom/bez koda poput Appsmitha možete pisati JavaScript u gotovo svakom svojstvu widgeta (tekst, boja, vidljivo, onemogućeno, itd.) korištenjem izraza unutar {{ }}. Ono što se tamo evaluira su JS izrazi koji uvijek vraćaju vrijednost: string, broj, logičku vrijednost, objekat, itd.

Također možete definirati Normalne funkcije, izrazi i funkcije strelica unutar JSObjects-aOvo su blokovi JavaScript koda sa `export default { … }`. Važno je napomenuti da, na najvišem nivou JSObject-a, definišete svojstva i metode kao parove ključ:vrijednost, odvojene zarezima, i da se `this` tih metoda ponaša u zavisnosti od toga da li su klasične funkcije ili funkcije strelica.

Kao najbolja praksa u JSObjects-u, uobičajeno je da koristite normalne funkcije kao glavne metode (kako bi se izbjegla zabuna sa `this`) i ugniježđene funkcije strelica unutar tih metoda kao povratne funkcije za filtere, mape, redukcije itd. Ovaj obrazac vam omogućava da iskoristite kompaktnu sintaksu strelica bez kompliciranja rukovanja kontekstom.

Najbolje prakse za savladavanje ove i funkcija strelica

Da biste maksimalno iskoristili ove alate, a da pritom ne pretjerate, postoji nekoliko smjernica koje vrijedi naučiti:

• Budite eksplicitni u kontekstuU slučaju sumnje, koristite bind ili arrow funkcije kako biste jasno naznačili koji `this` želite koristiti.
• Koristite funkcije strelica za povratne pozive gotovo uvijek, posebno u asinhronom kodu i metodama nizova, kako bi se izbjeglo gubljenje vanjskog `this`.
• Ne miješajte stilove bez potrebeAko koristite metode strelica za rukovaoce u klasi, održavajte taj obrazac u cijeloj komponenti radi konzistentnosti.
• Aktiviraj 'koristi strogo' ili koristite okruženja koja već primjenjuju striktni način rada kako bi se greške u ovom slučaju ranije aktivirale.
• Izbjegavajte oslanjanje na `ovo` za korisne funkcijeŠto su čistiji, to ih je lakše testirati i ponovo koristiti.

Dobro razumijem kako i kada koristiti funkcije strelica i šta njihovo leksičko ponašanje impliciraOvo, zajedno sa obavezujućim pravilima regularnih funkcija, stavlja vas u mnogo jaču poziciju za pisanje modernog JavaScripta. Vježbom ćete prestati gledati na `ovo` kao na podmuklog neprijatelja i umjesto toga ćete ga vidjeti kao moćan alat koji možete lako savladati u bilo kojem kontekstu, od preglednika do Node.js-a ili frameworka poput Reacta.